<template>
    <div style=" border-radius: 20px;
            background-color: #fff;
            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
            text-align: left;
        ">
        <a-timeline style="padding: 40px 50px">
            <a-timeline-item>
                <h3>2021年6月24日</h3>
                <h4>主要内容：</h4>
                <p>创建前端项目</p>
                <p>初步搭建项目骨架</p>
                <h4>细节：</h4>
                <p><span style="color:red">[新增]</span>
                    根据UI图、功能，划分和建立页面和组件，并在入门页面搭建布局。
                </p>
                <p><span style="color:red">[新增]</span>
                    实现侧导航栏样式和互动效果，设计路由，并使侧导航栏可根据路由切换左侧组件。
                </p>
                <p><span style="color:#5aa5e4">[修复]</span>
                    在浏览器窗口过小，侧栏展示不完整。
                </p>
            </a-timeline-item>
            <a-timeline-item>
                Solve initial network problems 2015-09-01
            </a-timeline-item>
            <a-timeline-item color="red">
                <template #dot>
                    <clock-circle-outlined style="font-size: 16px" />
                </template>
                Technical testing 2015-09-01
            </a-timeline-item>
        </a-timeline>
    </div>
</template>
<script lang="ts">
import { ClockCircleOutlined } from "@ant-design/icons-vue";
import { defineComponent } from "vue";
export default defineComponent({
    components: {
        ClockCircleOutlined,
    },
});
</script>
